<!DOCTYPE html>
<!--
  - This file is part of Avenge <https://adblockplus.org/>,
  - Copyright (C) 2006-present eyeo GmbH
  -
  - Avenge is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License version 3 as
  - published by the Free Software Foundation.
  -
  - Avenge is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
  -->

<html>
  <head>
    <meta charset="utf-8">
    <script defer src="polyfill.js"></script>
    <script defer src="ext/common.js"></script>
    <script defer src="ext/content.js"></script>
    <script defer src="i18n.js"></script>
    <script defer src="issue-reporter.js"></script>
    <link rel="stylesheet" type="text/css" href="skin/common.css">
    <link rel="stylesheet" type="text/css" href="skin/fonts.css">
    <link rel="stylesheet" type="text/css" href="skin/issue-reporter.css">
    <title class="i18n_issueReporter_page_title"></title>
  </head>
  <body>
    <!-- Notification -->
    <div id="notification">
      <span id="notification-text" class="i18n_issueReporter_data_gathering_tab"></span>
      <button class="icon close tertiary" id="hide-notification">
        <span class="i18n_common_notification_hide sr-only"></span>
      </button>
    </div>
    <header>
      <div class="logo">
        <img id="logo" alt="" src="skin/abp-logo.svg">
        <div class="title">
          <h1>
            Adblock <strong>Plus</strong>
          </h1>
          <p class="i18n_issueReporter_page_title"></p>
        </div>
      </div>
      <io-steps i18n-labels="
        issueReporter_selectIssueButton_label
        issueReporter_markIssueButton_label
        issueReporter_detailsButton_label
        issueReporter_doneButton_label
      "></io-steps>
    </header>

    <main>

      <div class="page" id="typeSelectorPage">
        <h1 class="i18n_issueReporter_typeSelector_heading"></h1>
        <p class="i18n_issueReporter_typeSelector_description"></p>
        <div id="typeSelectorGroup">
          <input type="radio" id="typeFalsePositive" value="false positive" name="type">
          <label for="typeFalsePositive" class="i18n_issueReporter_falsePositive_label"></label>
          <p class="i18n_issueReporter_falsePositive_description"></p>
          <input type="radio" id="typeFalseNegative" value="false negative" name="type">
          <label for="typeFalseNegative" class="i18n_issueReporter_falseNegative_label"></label>
          <p class="i18n_issueReporter_falseNegative_description"></p>
        </div>
      </div>

      <div class="page" id="highlighterPage" hidden>
        <h1 class="i18n_issueReporter_highlighter_heading"></h1>
        <p class="i18n_issueReporter_highlighter_description"></p>
      </div>
      <div class="page" id="commentPage" hidden>
        <h1 class="i18n_issueReporter_commentPage_heading"></h1>

        <p class="i18n_issueReporter_email_description"></p>

        <label for="email" class="i18n_issueReporter_email_label"></label>
        <input type="email" id="email" maxlength="200">

        <div id="anonymousSubmissionContainer">
          <input type="checkbox" id="anonymousSubmission">
          <label for="anonymousSubmission" class="i18n_issueReporter_anonymousSubmission_label"></label>
          <div id="anonymousSubmissionWarning" data-invisible="true" class="i18n_issueReporter_anonymousSubmission_warning"></div>
        </div>

        <label for="comment" class="i18n_issueReporter_comment_label"></label>
        <p class="i18n_issueReporter_comment_description"></p>
        <textarea id="comment"></textarea>
        <p>
            <button id="showData" class="i18n_issueReporter_showData_label link" disabled></button>
        </p>
      </div>

      <div class="page" id="sendPage" hidden>
        <h1 class="i18n_issueReporter_sendPage_heading"></h1>

        <p id="sendReportMessage" class="i18n_issueReporter_sending"></p>

        <div id="sendingProgressContainer">
          <progress id="sendingProgress"></progress>
        </div>

        <p id="error" hidden></p>

        <iframe id="result" sandbox="allow-top-navigation" hidden></iframe>
      </div>

      <div class="modal" id="showDataOverlay" hidden>
        <div class="modalContent">
          <pre id="showDataValue" tabindex="0"></pre>
          <button id="showDataClose" class="i18n_cancel primary"></button>
        </div>
      </div>
    </main>

    <footer>
      <div>
        <a id="privacyPolicy" target="_blank" class="i18n_issueReporter_privacyPolicy"></a>
      </div>
      <button id="cancel" class="i18n_cancel secondary"></button>
      <button id="continue" class="i18n_continue primary" disabled></button>
      <button id="send" class="i18n_issueReporter_sendButton_label primary" disabled hidden></button>
    </footer>
  </body>
</html>
